<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <link rel="shortcut icon" type="image/ico" href="favicon.ico" />
  <title>SlickGrid example 2: Formatters</title>
  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
  <link rel="stylesheet" href="../css/smoothness/jquery-ui.css" type="text/css"/>
  <link rel="stylesheet" href="examples.css" type="text/css"/>
  <style>
    .cell-title {
      font-weight: bold;
    }

    .cell-effort-driven {
      text-align: center;
    }

    .green {
      background-color: #aaffaa;
    }
    .red {
      background-color: #ff7777;
    }
    .orange {
      background-color: #ffbb66;
    }
  </style>
</head>
<body>
<table width="100%">
  <tr>
    <td valign="top" width="50%">
      <div id="myGrid" style="width:700px;height:500px;"></div>
    </td>
    <td valign="top">
      <h2>Demonstrates:</h2>
      <ul>
        <li>width, minWidth, maxWidth, resizable, cssClass column attributes</li>
        <li>custom column formatters</li>
        <li>an extended formatter returning an object { text, removeClasses, addClasses, toolTip } rather than a string, allowing adding and removing css classes from the cell. You can also optionally use toolTip to fill the "title" attribute</li>
      </ul>
        <h2>View Source:</h2>
        <ul>
            <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example2-formatters.html" target="_sourcewindow"> View the source for this example on Github</a></li>
        </ul>
    </td>
  </tr>
</table>

<script src="../lib/firebugx.js"></script>

<script src="../lib/jquery-1.12.4.min.js"></script>
<script src="../lib/jquery-ui.min.js"></script>
<script src="../lib/jquery.event.drag-2.3.0.js"></script>

<script src="../slick.core.js"></script>
<script src="../slick.editors.js"></script>
<script src="../slick.formatters.js"></script>
<script src="../slick.grid.js"></script>

<script>
   // a standard formatter returns a string
  function formatter(row, cell, value, columnDef, dataContext) {
      return value;
  }

  // an extended formatter returns an object { text, removeClasses, addClasses, toolTip }
  // the classes are removed and then added during an update, or just added on cell creation
  function statusFormatter(row, cell, value, columnDef, dataContext) {
      var rtn = { text: value, removeClasses: 'red orange green' };
      if (value !== null && value !== "") {
        if (value < 33) {
          rtn.addClasses = "red";
          rtn.toolTip = "danger zone";
        } else if (value < 66) {
          rtn.addClasses =  "orange";
          rtn.toolTip = "might want to look at it";
        } else {
          rtn.addClasses =  "green";
          rtn.toolTip = "all good";
        }
      }
      return rtn;
  }

  var grid;
  var data = [];
  var columns = [
    {id: "title", name: "Title", field: "title", width: 120, cssClass: "cell-title", formatter: formatter},
    {id: "duration", name: "Duration", field: "duration"},
    {id: "%", name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: Slick.Formatters.PercentCompleteBar},
    {id: "status", name: "Status", field: "percentComplete", width: 50, resizable: false, formatter: statusFormatter, editor: Slick.Editors.Text },
    {id: "start", name: "Start", field: "start", minWidth: 60},
    {id: "finish", name: "Finish", field: "finish", minWidth: 60},
    {id: "effort-driven", name: "Effort Driven", sortable: false, width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: Slick.Formatters.Checkmark}
  ];


  var options = {
    editable: true,
    enableAddRow: false,
    enableCellNavigation: true
  };

  $(function () {
    for (var i = 0; i < 5; i++) {
      var d = (data[i] = {});

      d["title"] = "<a href='#' tabindex='0'>Task</a> " + i;
      d["duration"] = "5 days";
      d["percentComplete"] = Math.min(100, Math.round(Math.random() * 110));
      d["start"] = "01/01/2009";
      d["finish"] = "01/05/2009";
      d["effortDriven"] = (i % 5 == 0);
    }

    grid = new Slick.Grid("#myGrid", data, columns, options);
  })
</script>
</body>
</html>
